<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="grid-content ep-bg-purple">
        <p><img src="../../../asset/images/touxiang123.jpg" alt=""></p>
        <p>警员姓名：&nbsp;&nbsp;&nbsp;<span>{{ name }}</span></p>
        <p>警员编号：&nbsp;&nbsp;&nbsp;<span>{{ num }}</span></p>
        <p><button @click="logOut">退出账号</button></p>
      </div>
   </el-col>
    <el-col :span="18">
      <div class="grid-content ep-bg-purple">
        <div class="login-set">
          <p class="login-title">登录设置</p>
          <div class="login-msg">
            <p> <span> 账号：&emsp;</span><span>{{ username }}</span></p>
            <p> <span> 密码：&emsp;</span><span>{{ password }}&emsp;&emsp;&emsp;&emsp;&emsp;</span><a href="">修改密码</a></p>
            <p><span> 手机号：&emsp;</span><span>{{ tel }}&emsp;&emsp;&emsp;&emsp;&emsp;<a href="">更换手机号</a></span></p>
          </div>
        </div>
        <div class="group-set">
          <p class="group-title">成员设置</p>
          <div class="group-msg">
            <p><span class="tex-rig">小队名称：</span><span class="team-title">{{ team }}</span></p>
            <div class="team-member" @mouseleave="personnull()">
              <div class="top">
                <span>队员：</span>
                <ul>
                  <li v-for="item in member" :key="item.index" @mouseover="change(item)">{{item}}</li>   
                </ul>
              </div>
              <template v-for="item in membermsg" :key="item.id">
                <div class="person-msg" v-if="item.name===person">
                <div class="left-msg">
                  <p>
                    <span>姓名：</span>
                    <span>{{ item.name }}</span>
                  </p>
                  <p>
                    <span>性别：</span>
                    <span>{{ item.teeamateSex }}</span>
                  </p>
                  <p>
                    <span>出生日期：</span>
                    <span>{{item.date}}</span>
                  </p>
                  <p>
                    <span>民族：</span>
                    <span>汉</span>
                  </p>
                  <p>
                    <span>籍贯：</span>
                    <span>{{ item.address }}</span>
                  </p>
                  <p>
                    <span>家庭住址：</span>
                    <span>康庄大道999号</span>
                  </p>
                </div>
                <div class="right-msg">
                  <p>
                    <span>联系方式：</span>
                    <span>111112222</span>
                  </p>
                  <p>
                    <span>入队时间：</span>
                    <span>2010.10.10</span>
                  </p>
                  <p>
                    <span>负责事项：</span>
                    <span>日常巡查</span>
                  </p>
                  <p>
                    <span>有无违纪：</span>
                    <span>无</span>
                  </p>
                </div>
              </div>
              </template>             
              
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { loginApi } from '@/api/api';
import { reactive  ,ref ,onMounted} from 'vue'
import { useRouter } from "vue-router";
const router = useRouter()
const logOut = () => {
   window.sessionStorage.clear();
    router.replace('/login')
};
let username =ref<any>('');
let password =ref<any>('');
let num =ref<any>('');
 username.value = sessionStorage.getItem('username')
 password.value = sessionStorage.getItem('password')
 num.value = sessionStorage.getItem('num')
 let name = ref<any>('')
 let tel = ref<any>('')
 let team = ref<any>('')
  let member =ref<any>([]);
 let membermsg =ref<any>([]);
 const getData =async ()=>{
  const res = await loginApi({username:username.value,password:password.value,})
  console.log(res.data.user);
  name.value = res.data.user.name
  tel.value = res.data.user.pho
  team.value = res.data.user.team
  member.value = res.data.user.teamper
  membermsg.value = res.data.user.membermsg
  console.log(membermsg.value);
 }
 let person =ref<any>('')
const change = (item:any)=>{
  person.value = item;
}
const personnull = ()=>{
  person.value = '';

}

 
onMounted(()=>{
  getData()

})
</script>
<style lang="less" scoped>
  .el-main {
    .el-row {
      background-color: #eee;
      height: 100%;
      padding: 20px 10px;

      .el-col-6  {
        height: 100%;
        .grid-content {
          border-radius: 10px;
          min-height: 36px;
          height: 100%;
          background-color: #fff;
          padding-top: 35%;
          p {
            padding: 14px 0;
            text-align: center;
            font-size: 14px;
            font-style: AdobeHeitiStd-Regular;
            font-weight: 600;
            // width: 100%;
            img {
              margin: 0 auto;
              width: 45%;
            }
          }
        }
      }
      .el-col-18 {
        height: 100%;
        .grid-content {
          height: 100%;
          
        }        
      }
    }
  }
  .login-set {
      height: 30%;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
      font-size: 14px;
      .login-msg {
        padding-top: 25px;
        p {
          font-size: AdobeHeitiStd-Regular;
          line-height: 30px;
          color: #9A9AAA;
          span {
            &:first-child {
              display: inline-block;
              width: 100px;
              text-align: right;
              font-weight: 600;
              color: #000;
            }
          }
          a {
            color: #9A9AAA;
            text-decoration: underline;
          }
        }
      }
   }
   .login-title , .group-title{
        line-height: 200%;
        border-bottom: 1px solid #000;
        font-size: 18px;
        font-style: HiraginoSansGB-W3;
        color: #9A9AAA;
        text-indent: 6px;
      }
   .group-set {
    height: 70%;
    padding-top: 25px;
    .group-msg {
      padding-top: 30px;
      font-size: 14px;
      p {
        line-height: 35px;
        .tex-rig {
            display: inline-block;
            width: 80px;
            text-align: right;
            font-weight: 600;
            color: #000;
        }
        
      }
      .team-member {
        .top {
          display: flex;
          span {
            display: inline-block;
            width: 80px;
            text-align: right;
            font-weight: 600;
            color: #000;
            line-height: 35px;
        }
        ul {
          display: flex;
          align-items: center;
        }
       }
        
      }
      li ,.team-title {
              display: inline-block;
              text-align: left;
              font-weight: 400;
              color: #9A9AAA;
              border: 2px solid #9A9AAA;
              background-color: #fff;
              text-align: center;
              width: 94px;
              line-height: 24px;
              border-radius: 4px;
              cursor: pointer;
            }
            li {
              width: 80px;
              margin-right: 15px;
              position: relative;
              &:hover {
                background: #6379A2;
                color: #fff;
                border: 0;
                &::after {
                  content: '';
                  height: 0;
                  width: 0;
                  border: 15px solid transparent;
                  border-bottom: 15px solid #fff;
                  position: absolute;
                  bottom: -30px;
                  left: 50%;
                  transform: translateX(-50%);
                }
              } 
            }
      }
   }
   .person-msg {
    display: flex;
    background-color: #fff;
    margin-top: 24px;
    padding-bottom: 10px;
    .left-msg ,.right-msg {
      width: 50%;
      p {
        line-height: 44px;
        span {
          &:first-child {
            display: inline-block;
            width: 120px;
            text-align: right;
            font-weight: 600;
            color: #000;
            line-height: 35px;
          }
          &:last-child {
            color: #9A9AAA;
            margin-left: 25px;

          }
        }
        input {
              background-color: #fff;
              color: #9A9AAA;
              border: 1px solid #9A9AAA;
              width: 50px;
              line-height: 20px;
              border-radius: 2px;
              margin-left: 50px;
              &:hover {
                background: #6379A2;
                color: #fff;
                border: 0;
              } 
            }
      }
    }
   }
   .el-form {
    display: flex;
    flex-wrap: wrap;
   }
   .example-block {
      margin: 1rem;
    }
    .example-demonstration {
      margin: 1rem;
    }
</style>